<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料-照片</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />

    <style>
        body,
        html {
            background: rgba(0, 0, 0, 0.5);
        }

        footer {
            text-align: center;
        }

        .foot-list {
            line-height: 50px;
            border-bottom: 1px solid #d9d9d9;
            font-size: 16px;
            color: #1a1a1a;
            background-color: #fff;
        }

        .foot-list:last-child {
            border: 0px;
        }

        .aui-bar-tab {
            background-color: #ededed
        }

        .border-b-no {
            border: 0px;
        }

        .hide {
            display: none;
        }

        .loading_div {
            background-color: rgba(255, 255, 255, 0.5);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 99;
            vertical-align: middle;
            text-align: center;
        }
        .loading {
            position: fixed;
            width: 156px;
            height: 20px;
            border-radius: 50%;
            top: 50%;
            margin-top: -10px;
            left: 50%;
            margin-left: -60px;
            z-index: 2;
        }
        .loading img {
            width: 20px;
            height: 20px;
            float: left;
        }
        .loading span {
            float: left;
            font-size: 12px;
            line-height: 20px;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <footer class="aui-bar aui-bar-tab dibu" id="footer">
        <div class="foot-list" onclick="sourceone()">拍照</div>
        <div class="foot-list" onclick="sourcetwo()">图库</div>
        <div class="foot-list aui-margin-t-0" onclick="cancel()">取消</div>
    </footer>
    <div class="loading_div hide">
        <div class="loading">
            <img id="pic" src="../../image/loading_more.gif" alt="">
            <span>正在上传图片请稍后...</span>
            <div class="aui-clearfix"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>

<script type="text/javascript">
    var uid = $api.getStorage('uid');
    var session = $api.getStorage('session');

    apiready = function() {
            if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                    FastClick.attach(document.body);
                }, false);
            }
            $api.fixTabBar($api.byId('footer'))
        }
        // 拍照
    function sourceone() {
        sourceType = 'camera';
        getpicture();
    }
    // 选照片
    function sourcetwo() {
        sourceType = 'album';
        getpicture();
    }

    function getpicture() {
        api.getPicture({
            sourceType: sourceType,
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            quality: 50,
            saveToPhotoAlbum: false
        }, function(ret, err) { //拿到路径  需上传到服务器上更新头像    接口文档
            if (ret) {
                // alert(ret.data)
                if (ret.data) {
                  openImageClipFrame(ret.data);
                  api.addEventListener({
                      name: 'clipimagesrc'
                  }, function(ret, err){
                    $('.loading_div').removeClass('hide');
                    $('.dibu').addClass('hide');
                    fnUploadAtavar(ret.value.clipimagesrc);
                  });
                    // $('.loading_div').removeClass('hide');
                    // $('.dibu').addClass('hide');
                    // fnUploadAtavar(ret.data);
                } else {
                    var systemType = api.systemType;
                    if (systemType == 'ios') {
                        api.toast({
                            msg: '您没有选择图片或者没有打开相机权限',
                            duration: 2000,
                            location: 'bottom'
                        });
                    } else {
                        api.toast({
                            msg: '您没有选择图片或者没有打开相机权限',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                    api.closeFrame();
                }
            } else {
                var systemType = api.systemType;
                if (systemType == 'ios') {
                    api.toast({
                        msg: '您没有选择图片或者没有打开相机权限',
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            }
        });
    }


    //上传文件到服务器  头像
    function fnUploadAtavar(avatarUrl_) {
      console.log(uid)
      console.log(session)
      console.log(avatarUrl_)
            api.ajax({
                url:  config.apiHost+config.restRoute.uploadPic,
                method: 'post',
                data: {
                    values: {
                        _uid: uid,
                        session:session
                    },
                    files: {
                        file:avatarUrl_
                    }
                }
            }, function(ret1, err1) {
                if (ret1) {
                    if (ret1.flag == 1) {
                        api.sendEvent({
                            name: 'uploadPic',
                            extra: {
                                uploadPic:avatarUrl_
                            }
                        });
                        api.closeFrame();
                        $('.loading_div').addClass('hide');

                    } else {
                        api.toast({
                            msg: ret1.msg,
                            duration: 2000,
                            location: 'bottom'
                        });
                        api.closeFrame();
                    }
                    console.log(JSON.stringify(ret1));
                } else {
                    console.log(JSON.stringify(err1));
                }
            });

    }

    /**
     * 打开图片裁剪页面
     */
    function openImageClipFrame(img_src) {
        api.openFrame({
            name: 'imageclip_frame',
            scrollToTop: true,
            allowEdit: true,
            url: 'imageclip_frame.html',
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: api.winHeight,
            },
            animation: {
                type: "reveal", //动画类型（详见动画类型常量）
                subType: "from_right", //动画子类型（详见动画子类型常量）
                duration: 300
            },
            pageParam: {
                img_src: img_src
            },
            vScrollBarEnabled: false,
            hScrollBarEnabled: false,
            bounces: false
        });
    }

    function cancel() {
        api.closeFrame();

    }
</script>

</html>
